<template>
	<view>
		<view class="timeDownBg">
			<u-icon name="clock" color="#EF1D53"></u-icon>
			<text class="timeDown">剩余时间:</text>
			<u-count-down
			        :time="durition*1000"
			        format="HH:mm:ss"
			        autoStart
			        millisecond
			        @change="onChange"
			    >
			        <view class="time">
			            <text class="time__item">{{ timeData.hours>10?timeData.hours:'0'+timeData.hours}}&nbsp;</text>
									<text class="time__unit">时</text>
			            <text class="time__item">{{ timeData.minutes }}&nbsp;</text>
									<text class="time__unit">分</text>
			            <text class="time__item">{{ timeData.seconds }}&nbsp;</text>
									<text class="time__unit">秒</text>
			        </view>
			    </u-count-down>
					
					<u-toast ref="uToast"></u-toast>
					
		</view>
		
		<!-- 学习测验题 -->
		<view class="exerciseBg">
			<exam-widght
			:dataList='questionList' 
			:answerShow="false"
			@select='selectItem' 
			:isPractice="false"
			>
			</exam-widght>
		</view>
		<view class="bottomBtn" @tap="commitExam">提交考卷</view>
		<!-- 弹框 -->
		<u-modal :show="show" :showCancelButton="true" title="温馨提示" content='您确认完成学习测验,提前交卷吗?'@confirm="confim" @cancel="show = false"></u-modal>
	</view>
</template>

<script>
	import examWidght from '@/components/Li-ExamWidght/Li-ExamWidght.vue';
	import * as practiceApi from '@/common/apis/practicetest-api.js';
	export default {
		components: {
			examWidght
		
		},
		data() {
			return {
				examName: '',
				testId: '',
				questionList: [],
				timeEnd : '',
				timeData: {},
				show : false,
			};
		},
		computed: {
		  durition() {
			  var moment = require('@/util/moment.js');
			  var m1 = moment().format("YYYY-MM-DD HH:mm:ss");
			  var m2 = moment(this.timeEnd);
			  var diff = m2.diff(m1, 'second');
			  return diff
			}
		},
		async onLoad(op) {
			this.testId = op.id;
			this.examName = op.examName;
			uni.setNavigationBarTitle({
				title: this.examName + '试题'
			})
			this.getExamQuestionsList();
		},
		methods: {
			getExamQuestionsList() {
				practiceApi.examQuestionsList({
						id: this.testId
					})
					.then(res => {
						this.timeEnd = res.completeTime;
						uni.setNavigationBarTitle({
							title: res.examName + '试题'
						})
						//重组答题list
						var questionList=res.examQuestions;
						for (var question of questionList) {
							//创建答题选项对象
							let {optA, optB, optC, optD} = {
								optA : {
									'fldOptionText' : question.optionA,
									'fldOptionIndex' : 1
								},
								optB : {
									'optionID' : question.id+'B',
									'fldOptionText' : question.optionB,
									'fldOptionIndex' : 2
								},
								optC : {
									'fldOptionText' : question.optionC,
									'fldOptionIndex' : 3
								},
								optD : {
									'fldOptionText' : question.optionD,
									'fldOptionIndex' : 4
								},
							}
							
							//重组答题选项list
							question.questionID =  question.id;
							question.fldName = question.questionsContent;
							question.fldAnswer = question.memberAnswer;
							question.questionType = 0;
							question.QuestionOptionList =  [optA, optB, optC, optD];
						}
						this.questionList = questionList;
						this.calculateDuration();
						
					});
			},
			
			//答题
			commitExamAnswer(item) {
				var anwser = item.anwser;
				var question = item.question;
				practiceApi.answer({
					examId : this.testId,
					examQuestionsId : question.id,
					questionsAnswer : anwser.fldOptionIndex
				}).then(res => {
					console.log(res);
				})
			},
			//倒计时改变
			onChange(e) {
				this.timeData = e;
				if(e.hour == 0 && e.minutes == 0 && e.seconds == 0) {
				  this.$refs.uToast.show({
				  		message: '学习测验结束时间已到,自动结束学习测验',
				  		complete() {
							uni.$emit('refreshTestListData');
				  			uni.navigateTo({
				  				url: './test-finish?id=' + this.testId + '&examName='+this.examName
				  			})
				  		}
				  })
				}
			},
			//点击对应的答题选项
			selectItem(item) {
				this.commitExamAnswer(item);
			},
			
			commitExam() {
				this.show = true;
			},
			//确认完成学习测验
			confim() {
				var moment = require('@/util/moment.js');
				var currentTime = moment().format("YYYY-MM-DD HH:mm:ss");
				// console.log(currentTime);
				practiceApi.submitExam({
					examId : this.testId,
					realCompleteTime : currentTime,
				}).then(res => {
					
					 uni.$emit('refreshTestListData');
					 uni.redirectTo({
					 	url: './test-finish?id=' + this.testId + '&examName='+this.examName
					 })
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.exerciseBg {
		margin-left: 20upx;
		margin-right: 20upx;
		border-radius: 16upx;
		padding: 20upx;
		background-color: #fff;
	}
	.timeDownBg {
		margin: 30upx 20upx;
		display: flex;
		justify-content: flex-end;
	}
	.timeDown {
		font-size: 30upx;
		text-align: center;
		color: #333333;
	}
	.time {
	    @include flex;
	    align-items: center;
	
	    &__item {
	         color: #EF1D53;
	         font-size: 30upx;
	         text-align: center;
	     }
			 &__unit {
				 color: #333333;
				 font-size: 30upx;
				 text-align: center;
			 }
		}
	.bottomBtn {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100upx;
		line-height: 100upx;
		background-color: #12B9A3;
    text-align: center;		
		color: #fff;
		font-size: 30upx;
	}
</style>
